<template>
	<view>
		<view class="search-box">
			<u-search shape="square" height="88"
				bg-color="#F7F8FA"
				placeholder="请输入你要搜索的内容"
				placeholder-color="#CCCCCC"
				search-icon-color="#999999"
				:action-style="{fontSize: '30rpx', fontWeight: 'bold', color: '#0071C5'}"
				:input-style="{fontSize: '28rpx'}">
			</u-search>
		</view>
		<view class="u-p-30">
			<view class="message-list-item" @click="toNoticeList">
				<view class="message-icon">
					<u-avatar src="/static/icons/notice-icon.png" mode="circle"></u-avatar>
					<u-badge :is-dot="true"
						:offset="[5, 5]"
						:count="$store.state.notice_msg_def.unreadNoticeCount"></u-badge>
				</view>
				<view class="message-content">
					<view class="message-type-title">
						<view class="u-flex-1">
							通知公告
						</view>
						<view class="message-time"></view>
					</view>
					<view class="message-item u-line-1">
						{{$store.state.notice_msg_def.noticeDefaultText}}
					</view>
				</view>
			</view>
			<view class="message-list-item" @click="toSystemMessage">
				<view class="message-icon">
					<u-avatar src="/static/icons/message-icon.png" mode="circle"></u-avatar>
					<u-badge :is-dot="true"
						:offset="[5, 5]"
						:count="$store.state.notice_msg_def.unreadMessageCount"></u-badge>
				</view>
				<view class="message-content">
					<view class="message-type-title">
						<view class="u-flex-1">
							系统消息
						</view>
						<view class="message-time"></view>
					</view>
					<view class="message-item u-line-1">
						{{$store.state.notice_msg_def.messageDefaultText}}
					</view>
				</view>
			</view>
			
			<view class="message-list-item" v-for="(item, i) in $store.state.notice_msg_def.unreadNums" :key="i">
				<view class="message-icon">
					<u-avatar :text="item.sendUserId" mode="circle" bg-color="#0071C5"></u-avatar>
					<u-badge :is-dot="true"
						:offset="[5, 5]"
						:count="item.unreadNum"></u-badge>
				</view>
				<view class="message-content">
					<view class="message-type-title">
						<view class="u-flex-1">
							{{item.sendUserId}}
						</view>
						<view class="message-time">{{$moment(item.defaultMessageTime).format('MM-DD')}}</view>
					</view>
					<view class="message-item u-line-1">
						{{item.defaultMessage}}
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			}
		},
		methods: {
			toNoticeList() {
				this.$u.route('/pages/message/messagecenter/noticelist')
			},
			toSystemMessage() {
				this.$u.route('/pages/message/system-message/index')
			}
		}
	}
</script>

<style>
	page {
		background-color: #FFFFFF;
	}
</style>
<style lang="scss" scoped>
	.search-box {
		padding: 14rpx 30rpx;
		background-color: #FFFFFF;
	}
	.message-list-item {
		display: flex;
		margin-bottom: 20rpx;
		.message-icon {
			position: relative;
			width: 88rpx;
			height: 88rpx;
		}
		.message-content {
			flex: 1;
			width: 0;
			padding-left: 20rpx;
			border-bottom: 1px solid #F7F8FA;
			.message-type-title {
				display: flex;
				font-size: 32rpx;
				font-weight: bold;
				.message-time {
					width: 100rpx;
					text-align: center;
					font-size: 24rpx;
					color: #CCCCCC;
				}
			}
			.message-item {
				width: 100%;
				padding-bottom: 20rpx;
				font-size: 24rpx;
				color: #999999;
			}
		}
	}
</style>
